<template>
  <div class="content-container">
    <!-- 搜索栏 -->
    <div ref="adminContentSearch" class="content-search-wrap">
      <el-form class="content-search" inline size="mini">
        <el-form-item label="商品名称">
          <el-input v-model="query.name" placeholder="商品名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="mini" type="primary">搜索</el-button>
          <el-button size="mini" type="danger">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 工具栏 -->
    <div ref="adminContentTools" class="content-tools-wrap hidden">
      <div class="tools-left f-l">
        <el-button-group>
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleAdd">发布商品</el-button>
        </el-button-group>
      </div>
      <div class="tools-right f-r">
        <el-tooltip effect="dark" content="刷新" placement="top">
          <el-button size="mini" type="primary" icon="el-icon-refresh" circle @click="refresh"></el-button>
        </el-tooltip>
      </div>
    </div>
    <!-- 内容栏--表格 -->
    <div
      class="content-table-wrap"
      v-loading="loading"
      loading-type="chrome-circle-turn"
      :style="{height:ResultHeight+'px'}"
    >
      <el-table
        border
        v-if="data"
        size="mini"
        :data="data"
        :height.sync="tableHeight"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column fixed type="index" :index="tableIndex"></el-table-column>

        <el-table-column fixed prop="name" label="排序" width="60"></el-table-column>

        <el-table-column fixed prop="productName" label="商品" width="200"></el-table-column>

        <el-table-column prop="id" label="商品编码" width="100"></el-table-column>

        <el-table-column prop="price" label="商品价格" width="80"></el-table-column>

        <el-table-column prop="status" label="商品状态" width="80"></el-table-column>

        <el-table-column prop="stock" label="库存" width="60"></el-table-column>

        <el-table-column prop="remark" label="销量" width="60"></el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>

            <el-button size="mini" type="primary" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div ref="adminContentPagination" class="content-pagination-wrap">
        <el-pagination
          backgroundnpm
          :current-page="page.currentPage"
          :page-sizes="pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        ></el-pagination>
      </div>
    </div>

    <!-- 发布商品dialog -->
    <add-dialog
      :visible="addDialogVisible"
      :form.sync="addForm"
      :type="editType"
      @cancel="editDialogCancel"
      @confirm="editDialogConfirm"
    ></add-dialog>

    <!-- 修改商品dialog -->
    <edit-dialog
      :visible="editDialogVisible"
      :type="editType"
      @cancel="editDialogCancel"
      @confirm="editDialogConfirm"
      :editForm="editForm"
    ></edit-dialog>

    <!-- 分配权限 -->
    <auth-assign
      :visible="authVisible"
      :menuIds="menuIds"
      :form.sync="authForm"
      @close="authDialogClose"
      @confirm="handleSetRoles"
    ></auth-assign>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import {
  getRole,
  remove,
  update,
  add,
  setMenu
} from "@/api/admin/roles";

import { getList, delList, getDetail } from "@/api/agri-product/goodsList";

import RoleEditDialog from "@/components/Dialog/roleEditDialog";
import AddDialog from "@/components/Dialog/productList/add/addDialog";
import EditDialog from "@/components/Dialog/productList/edit/editDialog";

import adminMixins from "@/mixins/admin";
export default {
  name: "role",
  mixins: [adminMixins],
  components: {
    RoleEditDialog,
    AddDialog,
    EditDialog
  },
  computed: {
    ...mapGetters(["name", "permission", "userInfo"])
  },
  data() {
    return {
      //1新增，2修改
      editType: 1,
      loading: true,
      authForm: {},
      //修改模态框的显示隐藏
      addDialogVisible: false,
      editDialogVisible: false,
      authVisible: false,
      menuIds: [],
      query: {
        name: ""
      },
      data: null,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      pageSizes: [10, 20, 30, 40, 50, 100],
      addForm: {}, //发布商品数据
      editForm: {}, //修改商品数据

    };
  },
  mounted() {
    //设置dom尺寸
    this.setSize();
    this.loadData(this.page);
  },
  methods: {
    //请求table数据
    loadData(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then(res => {
        console.log("---商品类型----------");
        console.log(res);
        this.loading = false;
        this.page.total = res.data.data.total;
        this.page.currentPage = res.data.data.current;
        this.data = this.reviseData(res.data.data.records);
      });
    },
    reviseData(data) {
      return data;
    },

    //转换账号状态
    convertStatus(status) {
      if (status == "ENABLE") {
        return true;
      } else if (status == "UNENABLE") {
        return false;
      } else {
        return false;
      }
    },
    //表格序号
    tableIndex(index) {
      return index + 1;
    },
    //发布商品
    handleAdd() {
      this.addForm = null;
      this.editType = 1;
      //模态框显示
      this.addDialogVisible = true;
    },
    //修改商品
    handleEdit (data) {
      getDetail(data.id).then(res => {
         this.editDialogVisible = true;
        this.editForm = res.data.data;
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '网络错误'
        })
      })
     
      console.log(this.editForm, 'this.editForm')
    },
    //刷新当前页
    refresh() {
      this.loadData(this.page);
    },
    //点击操作的删除
    handleDel(index, row) {
      console.log(row);

      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return delList(row.id);
        })
        .then(res => {
          this.loadData(this.page);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //分配权限
    handleRoles(index, row) {
      this.authForm = row;
      getRole(this.authForm.roleId).then(res => {
        console.log("------获取角色权限---------");
        this.authForm = res.data.data;
        this.authForm.menuId = this.authForm.menuIds || "";
        this.menuIds = this.authForm.menuIds;
        this.authVisible = true;
      });
    },
    handleSetRoles(data) {
      setMenu(data.roleId, data.menuId).then(() => {
        this.$message.success("设置成功");
        this.menuIds = [];
        this.authVisible = false;
        this.loadData(this.page);
        this.authForm = {};
      });
    },
    editDialogCancel() {
      this.addDialogVisible = false;
      this.editDialogVisible = false;
      this.addForm = null;
      this.editForm = {};
      this.loadData(this.page)
    },
    editDialogConfirm(form) {
      this.addDialogVisible = false;

      if (form.type == 1) {
        add(form.data).then(res => {
          //this.addDialogVisible = false;
          this.loadData(this.page);
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        });
      } else if (form.type == 2) {
        update(form.data).then(res => {
          this.loadData(this.page);
          this.$message({
            type: "success",
            message: "修改成功!"
          });
        });
      }
    },
    //权限模态框关闭
    authDialogClose() {
      this.menuIds = [];
      this.authVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  &-container {
  }
  /***搜索栏***/
  &-search-wrap {
    padding: 15px;
    border-bottom: 1px solid #e8ebee;
  }
  /***工具栏***/
  &-tools-wrap {
    padding: 15px;
  }
  /***内容栏***/
  &-table-wrap {
    position: relative;
    padding: 15px;
  }
  /***分页***/
  &-pagination-wrap {
    text-align: right;
    padding-top: 15px;
  }
}
</style>
